<template>
  <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form ref="form" :model="form" label-width="80px" slot="form">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="打卡日期">
                            <start-date v-model="form.startDate" 
                                        :clearable="true" 
                                        :picker-options="form.pickerOptions1" 
                                        :end-date-options.sync="form.pickerOptions2" 
                                        :state="false"></start-date>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="至">
                            <end-date v-model="form.endDate" 
                                    :clearable="true" 
                                    :picker-options="form.pickerOptions2" 
                                    :start-date-options.sync="form.pickerOptions1" 
                                    :state="false"></end-date>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="打卡人">
                            <el-input v-model="form.clockPeople" placeholder="请输入打卡人姓名" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="设备位置">
                            <el-input v-model="form.devicePosition" placeholder="请输入设备位置" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备编号">
                            <el-input v-model="form.deviceNum" placeholder="请输入设备编号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="考勤卡号">
                            <el-input v-model="form.attendanceNumber" style="width:100%" placeholder="请输入考勤卡号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('form')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button slot="reference" @click="btnExport">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading" ref="multipleTable">
                <el-table-column label="打卡时间" align="center">
                    <template scope="scope">
                        {{!scope.row.time ? '--' : scope.row.time}}
                    </template>
                </el-table-column>
                <el-table-column label="打卡人" align="center">
                    <template scope="scope">
                        {{!scope.row.punch ? '--' : scope.row.punch}}
                    </template>
                </el-table-column>
                <el-table-column label="考勤卡号" align="center">
                    <template scope="scope">
                        {{!scope.row.attendanceCardNum ? '--' : scope.row.attendanceCardNum}}
                    </template>
                </el-table-column>
                <el-table-column label="设备编号" align="center">
                    <template scope="scope">
                        {{!scope.row.number ? '--' : scope.row.number}}
                    </template>
                </el-table-column>
                <el-table-column label="设备位置" align="center">
                    <template scope="scope">
                        {{!scope.row.devicePosition ? '--' : scope.row.devicePosition}}
                    </template>
                </el-table-column>                        
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
  </div>
</template>
<script>
import moment from 'moment';
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import { mapState, mapActions, mapGetters } from 'vuex';
import { listSerach } from 'api/attendanceManage';
export default {
    name: 'patorlRecord',
    components: { Levelbar, TableLayout, startDate, endDate },
    data() {
        return {
            form: {
                clockPeople: '', // 打卡人
                attendanceNumber: '', // 考勤卡号
                devicePosition: '', // 设备定位
                deviceNum: '', // 设备类型
                startDate: '',
                endDate: '',
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > new Date().getTime()
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > new Date().getTime()
                    }
                }
            },
            tableData: [],
            listQuery: {     // 分页
                page: 1,
                total: 0
            },
            loading: false
        };
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['schoolId', 'cardIsOpen', 'token'])
    },
    created() {
        // this.initDate();
        // 可续费开通状态 0：未开通 1:可以使用 2：没到开通时间
        this.searchFetchData();
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
    // 设置初始时间
        initDate() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.form.startDate = start;
            this.form.endDate = end;
        },
    // 查询
        searchFetchData() {
            this.loading = true;
            let json ={
                schoolId: this.schoolId,
                punch: this.form.clockPeople,
                devicePosition: this.form.devicePosition,
                attendanceCardNum: this.form.attendanceNumber,
                startTime: !this.form.startDate?'':moment(this.form.startDate).format('YYYY-MM-DD') + ' 00:00:00',
                endTime: !this.form.endDate?'':moment(this.form.endDate).format('YYYY-MM-DD') + ' 23:59:59',
                number: this.form.deviceNum,
                page: this.listQuery.page,
                rows: this.config.pageSize
            }
            listSerach(json).then(res => {
                this.loading = false;
                this.tableData = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(err => {
                console.log(err);
                this.loading = false;
            });
        },

        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },
        btnExport() {
            let token = this.token,
                schoolId = this.schoolId,
                startTime = !this.form.startDate ? '' : moment(this.form.startDate).format('YYYY-MM-DD') + ' 00:00:00',
                endTime = !this.form.endDate ? '' : moment(this.form.endDate).format('YYYY-MM-DD') + ' 23:59:59',
                punch = this.form.clockPeople,
                devicePosition = this.form.devicePosition,
                attendanceNumber = this.form.attendanceNumber,
                number = this.form.deviceNum;
            if (this.listQuery.total != 0) {
                window.location.href = `${LOCAL_API.ly}/Serach/exportListSerach?token=${token}&schoolId=${schoolId}&startTime=${startTime}&endTime=${endTime}&punch=${punch}&devicePosition=${devicePosition}&number=${number}&attendanceCardNum=${attendanceNumber}`;
            } else {
                this.$message.warning('无数据，无法导出！');
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
}
</style>

